<template>
  <div>
    <ping :ping="ping" @guanbi="pingguanbi($event)"></ping>
    <div class="tree-box moreLine" :style="{ paddingBottom: transferHeight.pb + 'px' }">
      <div>
        <span>设备所在辖区</span>
        <treesBox :treesBox="treesBox" @handleNodeClick="treeClick($event)"></treesBox>
      </div>
    </div>
    <div class="main_r" :style="{ minHeight: transferHeight.contentH + 'px' }">
      <!-- Echarts 图标 -->
      <div class="t">
        <el-row class="t_container">
          <el-col :span="12">
            <echarts-load v-if="pieFlag || reload_pie" :chartFlag="pieFlag" :reload="reload_pie" @refreshF="refreshPie" />
            <pszl-pie v-else :pieData="pieData" />
          </el-col>
          <el-col :span="12">
            <echarts-load v-if="barFlag || reload_bar" :chartFlag="barFlag" :reload="reload_bar" @refreshF="refreshBar" />
            <txzd-bar v-else :barData="barData" />
          </el-col>
        </el-row>
      </div>
      <div class="b">
        <!-- 搜索条件 -->
        <el-form :inline="true" :model="searchCriteria" class="demo-form-inline">
          <el-form-item label="设备状态:">
            <el-select v-model="searchCriteria.isGZ" class="inputWidth" clearable placeholder="请选择">
              <el-option label="正常" value="zc"></el-option>
              <el-option label="异常" value="yc"></el-option>
              <el-option label="抓拍失败" value="tpds"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="诊断日期:">
            <el-date-picker
              v-model="searchCriteria.dataTime"
              :picker-options="pickerBeginDateBefore"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>-->
          <el-form-item>
            <el-input v-model.trim="searchCriteria.namer" width="200" prefix-icon="el-icon-search" clearable placeholder="输入设备名称或设备IP"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" class="btnSizeStyle">查询</el-button>
          </el-form-item>
          <!-- <el-form-item class="btns-box"><el-button class="btnClass">导出</el-button> </el-form-item>
          <el-form-item class="btns-box"><el-button class="btnClass">打印</el-button> </el-form-item>-->
        </el-form>
        <!-- 表格 -->
        <el-table
          :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
          ref="multipleTable"
          :data="tableData"
          style="width: 100%"
          border
          highlight-current-row
          stripe
          v-loading="tableLoad"
          @sort-change="sortthiscolumn"
        >
          <!-- 提示语句 -->
          <template slot="empty">{{ tableMessage }}</template>
          <el-table-column type="index" label="序号" min-width="50" align="center" />
          <el-table-column prop="zcmc" label="设备名称" sortable :show-overflow-tooltip="true" min-width="150">
            <template slot-scope="scope">
              <svg class="iconfont" aria-hidden="true" style="width: 12px; height: 12px; vertical-align: middle; margin-right: 5px">
                <use :xlink:href="`#el-icon-${scope.row.status === 0 ? 'mygenerated' : scope.row.status === 1 ? 'mynot_generated' : 'mytu_pian_diu_shi'}`" style="font-size: 50px" />
              </svg>
              <span v-html="getzcmc(scope.row)" @click="findRealPage(scope.row, 0)"></span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="设备类型" min-width="120">
            <template slot-scope="scope">
              <div>
                <span>{{ scope.row.zclxmc1 ? scope.row.zclxmc1 + ' / ' : '' }}</span>
                <span>{{ scope.row.zclxmc2 ? scope.row.zclxmc2 + ' / ' : '' }}</span>
                <span>{{ scope.row.zclxmc3 }}</span>
              </div>
            </template>
          </el-table-column>-->
          <el-table-column prop="zclxmc" label="设备类型" min-width="120" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span v-html="getsblx(scope.row)"></span>
            </template>
          </el-table-column>
          <el-table-column label="安装地址" min-width="200" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.zcsfmc + scope.row.zccsmc + scope.row.zcqxmc + scope.row.zcjdmc + scope.row.xxdz }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ip" label="设备IP" min-width="120"></el-table-column>
          <el-table-column prop="ppmc" label="品牌" min-width="80"></el-table-column>
          <el-table-column prop="xh" label="型号" min-width="120" :show-overflow-tooltip="true"></el-table-column>
          <!-- <el-table-column prop="zclxmc" label="异常分类" min-width="120"></el-table-column> -->
          <!-- <el-table-column prop="path" label="异常图像" min-width="120">
            <template slot-scope="scope">
              <el-image style="width: 45px; height: 45px" :src="scope.row.path" :preview-src-list="[scope.row.path]">
                <div slot="error">
                  <img style="width: 100%" :src="scope.row.path" alt />
                </div>
              </el-image>
            </template>
          </el-table-column>-->
          <el-table-column prop="wtscsj" label="诊断时间" sortable min-width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.jcsj | dateFormat }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="zclxmc" label="宿主" min-width="98">
            <template slot-scope="scope">
              <!-- <el-tooltip
                class="item"
                :content="item.SZMC"
                placement="top-start"
                popper-class="atooltip"
                v-for="item in scope.row.szs"
                :key="item.SZLX"
                v-show="scope.row.szs.length === 0 ? false : true"
              >
                <svg class="iconfont" aria-hidden="true" style="width: 20px; height: 20px; vertical-align: middle; margin-right: 5px">
                  <use :xlink:href="'#el-icon-my' + shuZhu[item.SZLX]" style="font-size: 50px" />
                </svg>
              </el-tooltip>-->
              <span v-for="(item, index) in scope.row.szs" :key="index">
                <el-tooltip v-if="Number(item.SZLX) >= 0" class="item" placement="top-start" popper-class="atooltip">
                  <div slot="content">{{ item.SZMC }}</div>
                  <svg class="iconfont" aria-hidden="true" style="width: 20px; height: 20px">
                    <!-- 0运维主机 1卡口 2电警 -->
                    <use :xlink:href="`#el-icon-mysuzhu_${item.SZLX}`" style="font-size: 50px" />
                  </svg>
                </el-tooltip>
                <svg v-else class="iconfont" aria-hidden="true" style="width: 20px; height: 20px">
                  <!-- 0运维主机 1卡口 2电警 -->
                  <use :xlink:href="`#el-icon-my${grayIcon[index]}`" style="font-size: 50px" />
                </svg>
              </span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="工单状态" min-width="120">
            <template slot-scope="scope">
              <span :class="[`type${scope.row.gdzt}`, 'type']">{{ type[scope.row.gdzt] }}</span>
            </template>
          </el-table-column>-->
          <el-table-column fixed="right" label="操作" min-width="150" align="right">
            <template slot-scope="scope">
              <div class="operations">
                <!-- 不可以点击加上 noAction这个类名 -->
                <!-- <el-button type="text" @click="handleClick(scope.row)">编辑</el-button> -->
                <el-link
                  :disabled="scope.row.ip !== '' && scope.row.ip !== null ? false : true"
                  :type="scope.row.ip !== '' && scope.row.ip !== null ? 'primary' : 'info'"
                  :underline="false"
                  :href="'http://' + scope.row.ip"
                  target="_blank"
                  >远程控制</el-link
                >
                <span class="operation"></span>
                <el-button type="text" @click="showPingOk(scope.row)" :disabled="scope.row.ip !== '' && scope.row.ip !== null ? false : true">ping</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row class="page-row">
          <el-col :span="12">
            <div class="bigBOx btnBefore">
              <div class="imgBox">
                <svg class="iconfont imgIcon" aria-hidden="true">
                  <use xlink:href="#el-icon-mygenerated" />
                </svg>
                <span>正常</span>
              </div>
              <div class="imgBox">
                <svg class="iconfont imgIcon" aria-hidden="true">
                  <use xlink:href="#el-icon-mynot_generated" />
                </svg>
                <span>异常</span>
              </div>
              <div class="imgBox">
                <svg class="iconfont imgIcon" aria-hidden="true">
                  <use xlink:href="#el-icon-mytu_pian_diu_shi" />
                </svg>
                <span>抓拍失败</span>
              </div>
              <div class="imgBox">
                <svg class="iconfont imgIcon size17" aria-hidden="true">
                  <use xlink:href="#el-icon-mysuzhu_0" />
                </svg>
                <span>运维主机</span>
              </div>
              <div class="imgBox">
                <svg class="iconfont imgIcon size17" aria-hidden="true">
                  <use xlink:href="#el-icon-mysuzhu_1" />
                </svg>
                <span>卡口</span>
              </div>
              <div class="imgBox">
                <svg class="iconfont imgIcon size17" aria-hidden="true">
                  <use xlink:href="#el-icon-mysuzhu_2" />
                </svg>
                <span>电子警察</span>
              </div>
            </div>
          </el-col>
          <el-col :span="12" style="height: 47px; display: table">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next"
              :total="total"
            ></el-pagination>
            <!-- <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="100"
              layout="total,prev, pager, next, jumper"
              :total="1000"
            ></el-pagination>-->
          </el-col>
        </el-row>
      </div>
    </div>
    <el-dialog title="图像质量诊断" :visible.sync="dialogTableVisible" class="loading" width="1040px" @close="dialogClose">
      <el-tabs v-model="activeName" class="noScorllFixed" type="card" @tab-click="handleClick">
        <el-tab-pane label="图像质量诊断详情" name="pszlDetails">
          <pszl-details :detailsDate="detailsDate" />
        </el-tab-pane>
        <el-tab-pane label="图像质量诊断历史" name="pszlHistory">
          <pszl-history :dataList="historyDate" ref="historyDatePage" />
        </el-tab-pane>
      </el-tabs>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>
      </div>-->
    </el-dialog>
  </div>
</template>
<script>
import Ping from '@/components/ping/index.vue'
import pszlPie from '@/components/Echarts/pszlPie'
import txzdBar from '@/components/Echarts/txzdBar'
import treesBox from '@/components/treesBox/index.vue'
// import { getUrl } from '@/utils/getUrl.js'
// import { endLoading } from '@/utils/loading.js'
import pszlDetails from '@/components/RunTesting/PSZL/pszlDetails'
import pszlHistory from '@/components/RunTesting/PSZL/pszlHistory'
// import { getUrl } from '@/utils/getUrl.js'
import { xunJian } from '@/utils/allUrl'
import echartsLoad from '@/components/Echarts/echartsLoad'
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
import { threeLevelH } from '@/assets/js/calcHeight'
export default {
  computed: {
    transferHeight: function () {
      // 计算屏幕滚动高度 - nav - 导航栏
      return {
        contentH: window.innerHeight - threeLevelH,
        pb: threeLevelH,
      }
    },
  },
  components: { Ping, treesBox, pszlPie, txzdBar, pszlDetails, pszlHistory, echartsLoad },
  data() {
    return {
      //  1 '已受理 (',当前处理人可看)
      //  2 '待确认',
      //  3 '正常关闭',
      //  4 '驳回',
      //  5 '挂起',
      //  6 '外派',
      //  7 '异常关闭',
      type: ['未生成', '已受理', '待确认', '正常关闭', '驳回', '挂起', '外派'], // 正常和异常关闭不需要
      shuZhu: ['suzhu_0', 'suzhu_1', 'suzhu_2'], // 宿主
      treesBox: {
        url: 'ZI_CHAN',
        // url: 'yonghu/selectYongHuXiaQuByZc',
        GZKZ: [5, 45],
      }, // tree图的请求地址
      // defaultProps: {
      //   children: 'children',
      //   label: 'label',
      // },
      searchCriteria: {
        isGZ: '', // 故障类型
        dataTime: '', // 诊断日期
        namer: '',
      },
      tableData: [],
      wtbmdjs: 1,
      pickerBeginDateBefore: {
        // 设置只能选择到今天及以前的日期
        disabledDate(time) {
          return time.getTime() >= Date.now()
        },
      },
      dialogTableVisible: false,
      activeName: 'pszlDetails',
      detailsDate: {},
      historyDate: {},
      pieFlag: false, // 饼图
      barFlag: false, // 柱形图
      reload_pie: false,
      reload_bar: false,
      pieTimer: null,
      barTimer: null,
      barData: {},
      pieData: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      tableMessage: '',
      tableLoad: false,
      ping: {
        // ping
        name: '', // ping设备名称
        speedOpen: false, // ping框
        ip: '',
      },
      treeData: {
        label: '',
        levels: '',
      },
      grayIcon: ['zhuji_hui', 'kakou_hui', 'dzjc_hui'],
      rowList: {},
      listQuery: {
        sortby: '',
        order: '',
      },
    }
  },
  watch: {
    tableLoad(newVal, oldVal) {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.tableData = []
          this.tableMessage = tableMessageText
          // this.total = 0
        }
      }, timeLoad)
    },
    pieFlag(newVal, oldVal) {
      this.pieTimer = setTimeout(() => {
        if (this.pieFlag) {
          this.pieFlag = false
          this.reload_pie = true
        }
      }, timeLoad)
    },
    barFlag(newVal, oldVal) {
      this.barTimer = setTimeout(() => {
        if (this.barFlag) {
          this.barFlag = false
          this.reload_bar = true
        }
      }, timeLoad)
    },
  },
  created() {
    this.setList()
    this.initPie()
    this.initBar()
  },
  methods: {
    getzcmc(row) {
      return `<span class="fontColor">${row.zcmc}</span>`
    },
    getsblx(row) {
      return `<span>${row.zclxmc1 ? row.zclxmc1 + ' / ' : ''}</span>
                <span>${row.zclxmc2 ? row.zclxmc2 + ' / ' : ''}</span>
                <span>${row.zclxmc3}</span>`
    },
    treeClick(e) {
      this.treeData.label = e.type.label
      this.treeData.levels = e.type.levels
      this.onSubmit()
    },
    async setList(params) {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const { data: res } = await this.$http.post(`${xunJian}tpjc/selectTuPianJianCe`, params)
      this.tableLoad = false // 表格加载中样式
      switch (res.code) {
        case '0000':
          this.tableData = res.data.list
          this.total = res.data.total
          break
        default:
          this.tableData = []
          this.total = 0
          this.tableMessage = res.message
          break
      }
    },
    initList() {
      this.tableMessage = ''
      const params = new URLSearchParams()
      if (this.searchCriteria.dataTime instanceof Array) {
        params.append('startTime', this.searchCriteria.dataTime[0])
        params.append('endTime', this.searchCriteria.dataTime[1])
      }
      params.append('order', this.listQuery.sortby) // 排序字段
      params.append('sort', this.listQuery.order) // DESC降序 ASC升序
      params.append('status', this.searchCriteria.isGZ)
      params.append('zcmc', this.searchCriteria.namer)
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      switch (this.treeData.levels) {
        case 1:
          params.append('SF', this.treeData.label)
          break
        case 2:
          params.append('CS', this.treeData.label)
          break
        case 3:
          params.append('QX', this.treeData.label)
          break
        case 4:
          params.append('XZJD', this.treeData.label)
          break
      }
      this.setList(params)
    },
    // 排序
    sortthiscolumn(column) {
      if (column.order === 'descending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'DESC' // 降序
      } else if (column.order === 'ascending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'ASC' // 升序
      } else {
        this.listQuery.sortby = ''
        this.listQuery.order = '' // 没有排序
      }
      this.initList()
    },
    // 饼状图
    async initPie() {
      clearTimeout(this.pieTimer)
      this.pieFlag = true
      const { data: res } = await this.$http.post(`${xunJian}tpjc/selectCount`)
      console.log(res)
      switch (res.code) {
        case '0000':
          this.pieData = [
            { value: res.data.YC, name: '图像异常' },
            { value: res.data.ZC, name: '图像正常' },
            { value: res.data.TPDS, name: '抓拍失败' },
          ]
          break
        case '0013':
          this.pieData = [
            { value: 0, name: '图像异常' },
            { value: 0, name: '图像正常' },
            { value: 0, name: '抓拍失败' },
          ]
          break
        default:
          this.reload_pie = true
          break
      }
      this.pieFlag = false
    },
    refreshPie() {
      this.reload_pie = false
      this.initPie()
    },
    // 柱状图
    async initBar() {
      clearTimeout(this.barTimer)
      this.barFlag = true
      const { data: res } = await this.$http.post(xunJian + 'tpjc/selectSum')
      var xList = []
      var yData = []
      switch (res.code) {
        case '0000':
          var resList = res.data.list[0]
          var list = [
            // 2020-12-13 暂时只开启亮度、偏色、遮挡(部分与全)、虚焦，4项
            { count: resList.brightnessException, name: '亮度异常 ' },
            { count: resList.freeze, name: '冻结 ' },
            { count: resList.obscure, name: '虚焦 ' },
            { count: resList.partialOcclusion, name: '部分遮挡 ' },
            { count: resList.totalOcclusion, name: '全遮挡 ' },
            { count: resList.lose, name: '抓拍失败 ' },

            // { count: resList.brightnessException, name: '亮度异常 ' },
            // { count: resList.captureBlocking, name: '块效应 ' },
            // { count: resList.captureLose, name: '信号丢失 ' },
            // { count: resList.colorException, name: ' 偏色 ' },
            // { count: resList.contrast, name: '低对比度 ' },
            // { count: resList.freeze, name: '冻结 ' },
            // { count: resList.horizontalStripe, name: '水平条纹 ' },
            // { count: resList.obscure, name: '虚焦 ' },
            // { count: resList.partialOcclusion, name: '部分遮挡 ' },
            // { count: resList.totalOcclusion, name: '全遮挡 ' },
            // { count: resList.snowFlake, name: '雪花 ' },
            // { count: resList.turnRound, name: '转向 ' }
          ]
          list.forEach((item) => {
            xList.push(item.name)
            yData.push(item.count)
          })
          this.barData = {
            xList: xList,
            yData: yData,
          }
          break
        case '0013':
          this.barData = {
            // 2020-12-13 暂时只开启亮度、偏色、遮挡(部分与全)、虚焦，4项
            xList: ['亮度异常', '冻结', '虚焦', '部分遮挡', '全遮挡', '抓拍失败'],
            yData: [0, 0, 0, 0, 0, 0],
            // xList: ['亮度异常', '块效应', '信号丢失', '偏色', '低对比度', '冻结', '水平条纹', '虚焦', '部分遮挡', '全遮挡', '雪花', '转向'],
            // yData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          }
          break
        default:
          this.reload_bar = true
          break
      }
      // this.barData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

      this.barFlag = false
    },
    refreshBar() {
      this.reload_bar = false
      this.initBar()
    },
    onSubmit() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true // 表格加载中样式
      this.currentPage = 1
      this.pageSize = 10
      this.initList()
    },
    handleSizeChange(val) {
      this.currentPage = 1
      this.pageSize = val
      this.initList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.initList()
    },
    addClass({ row, column, rowIndex, columnIndex }) {
      // console.log('row:', row, 'column:', column, 'rowIndex:', rowIndex, 'columnIndex:', columnIndex)
      // if (columnIndex === 0) {
      //   return 'fontColor'
      // }
    },
    findRealPage(row, type) {
      this.activeName = 'pszlDetails' // 标签页
      row.xjType = type
      this.rowList = row
      this.detailsDate = row
      this.historyDate = row
      this.dialogTableVisible = true
    },
    dialogClose() {
      // 弹窗关闭标签页重置第一个
      // this.activeName = 'pszlDetails' // 标签页
      // this.detailsDate = {}
      // this.historyDate = {}
    },
    handleClick(tab, event) {
      // tab 切换事件
      switch (tab.index) {
        case 0:
          this.detailsDate = this.rowList
          break
        default:
          this.historyDate.currentPage = 1
          this.historyDate.pageSize = 10
          this.$refs.historyDatePage.$emit('childMethod', { currentPage: 1, pageSize: 10 })
          break
      }
    },
    // ping
    showPingOk(val) {
      this.ping.speedOpen = true
      this.ping.ip = val.ip
      this.ping.name = val.zcmc
    },
    // ping组件
    pingguanbi(val) {
      this.ping = {
        speedOpen: val.type,
        name: '', // ping设备名称
        ip: '',
      }
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/xjzxCommon.scss';
// ::v-deep .el-tabs__nav-scroll {
//   width: 100%;
//   position: unset !important;
//   z-index: 60;
//   background-color: #fff;
// }
.t_container {
  height: 100%;
  .el-col {
    height: 250px;
  }
}
// .el-tabs__header
// .el-tabs__nav-scroll::after
</style>
